<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/commons/taglibs.jsp" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <title>实时指标管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">

    <!-- css -->
    <link href="${ctx}/css/skin/bootstrap-cerulean.css" rel="stylesheet"
          id="bs-css">

    <link href="${ctx}/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="${ctx}/css/bootstrap-sortable.css" rel="stylesheet">
    <link href="${ctx}/css/dynamic-page.css" rel="stylesheet">

    <!-- external javascript
        ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="${ctx}/js/jquery.min.js"></script>
    <!-- 在dynamic-page.js中, 用到了jquery-ui的sortable拖曳特效 -->
    <script src="${ctx}/js/jquery-ui.custom.min.js"></script>
    <script src="${ctx}/js/bootstrap.min.js"></script>
    <script src="${ctx}/js/dynamic-page.js"></script>
    <script src="${ctx}/js/bootstrap-tooltip.js"></script>
    <script src="${ctx}/js/bootstrap-popover.js"></script>

    <script src="${ctx}/js/bootstrap-sortable.js"></script>

    <style type="text/css">
        .div-space {
            margin-left: 15px;
            margin-right: 15px;
        }
    </style>

    <script type="text/javascript">

    var updateConf = function(sqlId) {

		var data = $("#confForm").serializeArray();
		var url = '${ctx}/update.do?sqlId='+sqlId;
		$.ajax({
			type : "POST",
			url : url,
			data : data,
			async : true,
			cache : false,
			dataType : "json",
			success : function(data) {
				if (data['status'] == '0') {
					//$('#msg').html(data['message'] + "<br/>").show();
					alert(data['message']);
					document.getElementById("confForm").reset();
				} else {
					//alert("修改成功，请点击返回");
					//location.reload();
					window.location.href="${ctx}/sqlJob.do";
				}

			}
		});
	};

        var delSqlJob = function (sqlId) {
                    $('#delModal').modal('show').on('shown', function () {
                        $('#sure_commit').on('click', function () {
                            delModule(sqlId);
                        });
                    });
                }
                ;


        var delModule = function (sqlId) {
            var url = '${ctx}/deleteSqlJob.do?sqlId=' + sqlId;
            $.ajax({
                type: "POST",
                url: url,
                async: true,
                cache: false,
                dataType: 'json',
                success: function (data) {
                    location.reload();
                },
                error: function () {
                    alert('删除sqlJob失败！');
                }
            });
        };

    </script>
</head>

<body>
<div class="row-fluid sortable">
    <!-- 切换皮肤需求引用 -->
    <input type="hidden" id="ctx" value="">
	<div class="box-content">
        <div class="box rp-table">
            <div class="box-header well">
                <h2>
                    <i class=" icon-question-sign"></i> <span id='tTitle'>帮助</span>
                </h2>

                <div class="box-icon">
                    <a href="#" class="btn btn-close btn-round"><i
                            class="icon-remove"></i></a>
                </div>
            </div>
            <div class="box-content">
                <span>选择实时指标和对应的维度,会生成对应的查询语句</span>
            </div>
        </div>
    </div>

    <div class="box-content">
        <div class="box rp-table">
            <div class="box-header well">
                <h2>
                    <i class="icon-edit"></i> <span id='tTitle'>实时SQL修改</span>
                </h2>

            </div>
            <div class="bs-docs-example">
                <form id="confForm" >
                    <legend>&nbsp;</legend>
                    <div>
                        <label>名称</label>

                        <div>
                            <input type="text" size="100" id="name" name="name" value="${sqlJob.name}"
                                   placeholder="请取有意义名称" required="true"> <span class="required"><font
                                color="#FF0000">*</font></span>
                        </div>
                    </div>
					<div>
                        <label>BirdDB查询语句</label>

                        <div>
                            <textarea id="queryStatement" name="queryStatement" class="form-control" rows="10" cols="50">${sqlJob.queryStatement}</textarea><span class="required"><font
                                color="#FF0000">*</font></span>
                        </div>
                    </div>
					<div>
                        <label>Redis操作命令</label>

                        <div>
                            <textarea id="intoRedis" name="intoRedis"  class="form-control" rows="10" cols="50">${sqlJob.intoRedis}</textarea><span class="required"><font
                                color="#FF0000">*</font></span>
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <input type="button" value="更新" onclick="updateConf(${sqlJob.sqlId})">&nbsp;&nbsp;&nbsp;
                            <input type ="button" onclick="javascript:location.href='${ctx}/sqlJob.do'" value="返回">
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <div class="box-content">
        <div class="box rp-table">
            <div class="box-header well">
                <h2>
                    <i class="icon-info-sign"></i> <span id='tTitle'>实时指标信息</span>
                </h2>

                <div class="box-icon">
                    <a href="#" class="btn btn-close btn-round"><i
                            class="icon-remove"></i></a>
                </div>
            </div>
            <div class="box-content">
                <table id="confTable"
                       class="table table-striped table-bordered table-hover table-condensed  scrolltable sortable">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>名称</th>
                        <th>查询语句</th>
                        <th>redis操作命令</th>
                        <th>last error</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${sqlJobList}" var="sqlJob" varStatus="index">
                        <tr>
                            <td>${sqlJob.sqlId}</td>
                            <td>${sqlJob.name}</td>
                            <td>${sqlJob.queryStatement}</td>
                            <td>${sqlJob.intoRedis}</td>
                            <td>${sqlJob.errorMessage}</td>
                            <td>
                                <a style="cursor: pointer" href="javascript:void(0)"
                                   onclick="delSqlJob('${sqlJob.sqlId}')" role="button"
                                   data-toggle="modal">删除</a>&nbsp;&nbsp;
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <div id="delModal" class="modal hide fade" tabindex="-1" role="dialog"
         aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×
            </button>
            <h3 id="modalLabel">指标删除</h3>
        </div>
        <div class="modal-body">
            <p>删除指标后不能恢复，是否确认删除？</p>
        </div>
        <div class="modal-footer">
            <button id="close" class="btn" data-dismiss="modal"
                    aria-hidden="true">关闭
            </button>
            <button id="sure_commit" class="btn btn-primary"
                    data-dismiss="modal" aria-hidden="true">确定
            </button>
        </div>
    </div>


</div>

</body>
</html>
